<template>
	<view>
		<u-navbar :title="title" @rightClick="allHaveBeenRead" :autoBack="true" rightText="全部已读">
		</u-navbar>

		<view class="top m-b-30"></view>

		<common-list @load="messageList" :list="list" :status="status">
			<template #list>
				<view class="m-l-30 m-r-30 m-b-20 p-l-30 p-r-28 back-color-c radius-16" v-for="(item, i) in list"
					:key="i" @click="details(item.id)">
					<view class="h-112 flex-between border-bottom-ee">
						<view class="flex font-32 color-d">{{item.title}}
							<view class="badge" v-show="!item.is_read"></view>
						</view>
						<view class="font-24 color-a">{{item.create_time | date('yyyy-mm-dd')}}</view>
					</view>
					<view class="p-t-30 p-b-30" style="max-height: 300rpx;overflow:hidden;" @click.stop="()=>{}">
						<u-parse :content="item.content" @preview.stop="preview"></u-parse>
						<!-- <view class="font-28 color-d line-3" v-html="item.content">
						</view> -->
					</view>
				</view>
			</template>
			<template #empty>
				<empty text="暂无消息～"></empty>
			</template>
		</common-list>

		<view class="h-68"></view>
	</view>
</template>

<script>
	export default {
		name: 'msgDetails',
		data() {
			return {
				page: 1,
				status: 'loading',
				id: '',
				title: '系统消息',
				list: []
			}
		},
		onLoad(ops) {
			if (ops.id) {
				this.id = ops.id
				if (ops.id == 1) {
					this.title = '系统消息'
				} else {
					this.title = '财务消息'
				}
			}
		},
		onShow() {
			this.page = 1
			this.list = []
			this.messageList()
		},
		onReachBottom() {
			if (this.status === 'nomore') return
			this.messageList()
		},
		methods: {
			preview(res, e) {
				console.log(res, e);
			},
			details(id) {
				uni.$u.route(`/pages/msg/msg-details?id=${id}`)
			},
			async messageList() {
				const {
					page,
					limit,
					id
				} = this
				let params = {
					page,
					limit,
					type: id
				}
				this.status = 'loading'
				const res = await this.$api.common.system('messageList', params)
				if (res.code === 200) {
					const {
						count,
						list
					} = res.data
					this.list = [...this.list, ...list]
					if (this.list.length >= count) {
						// 所有数据加载完毕
						this.status = 'nomore'
						return
					}
					// 单次请求数据完毕
					this.status = 'loadmore'
					this.page = this.page + 1
				}
			},
			// 消息全部已读
			async allHaveBeenRead() {
				const res = await this.$api.common.system('allHaveBeenRead', {
					type: this.id
				})
				if (res.code === 200) {
					this.list = []
					this.page = 1
					this.messageList()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.badge {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: $e;
		margin-left: 8rpx;
		transform: translateY(-10rpx);
	}
</style>
